---
import "@docsearch/css/dist/style.css";
import "@src/styles/index.scss";

import ColorSchemeSwitcher from "@src/components/ColorSchemeSwitcher.astro";
import ExternalLinks from "@src/components/ExternalLinks.astro";
import ActiveLink from "@src/components/ActiveLink.astro";
import InlineSVG from "@src/components/InlineSVG.astro";

const {props} = Astro;
const {frontmatter = {}} = props;

const bodyClass = frontmatter.bodyClass ?? props.bodyClass ?? "";
const socialImage = frontmatter.socialImage ?? props.socialImage ?? "social-logo.png";

const description = frontmatter.description ?? props.description ?? "";

let title = props.title ?? frontmatter.title ?? "";
title = title.trim();
if (!title.includes("Rome")) {
	if (title !== "") {
		title += " \u2014 ";
	}
	title += "Rome";
}

function encodeSVG(buffer: string) {
	return `data:image/svg+xml;utf8,${encodeURIComponent(buffer.toString())}`;
}

const { default: favicon } = await import("/public/img/favicon.svg?raw");
---

<!doctype html>
<html lang="en" data-theme="auto">
	<head>
		<meta charset="utf8" />
		<title>{title}</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<link rel="mask-icon" href="/img/pinned-rome-logo.svg" color="#FFC905">
		<link rel="alternate icon" type="image/png" href="/img/favicon.png">
		<link rel="icon" type="image/svg+xml" href={encodeSVG(favicon)}>

		<link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin>
		<link rel="preload" href="/fonts/Inter-Bold.woff2" as="font" type="font/woff2" crossorigin>
		<link rel="preload" href="/fonts/Inter-Medium.woff2" as="font" type="font/woff2" crossorigin>

		<meta name="description" content={description}>
		<meta name="theme-color" content="#FFC905">
		<meta property="og:title" content={title}>
		<meta property="og:description" content={description}>
		<meta property="og:image" content={`${import.meta.env.SITE}/img/${socialImage}`}>
		<meta property="twitter:image" content={`${import.meta.env.SITE}/img/${socialImage}`}>
		<meta property="twitter:site" content="@rometools">
		<meta property="twitter:creator" content="@rometools">
		<meta property="twitter:image:alt" content="Logo for Rome Tools">
		<meta property="twitter:card" content="summary_large_image">

		<script is:inline>
			(function () {
				const currentTheme = localStorage.getItem('data-theme');
				if (currentTheme != null) {
					document.documentElement.setAttribute("data-theme", currentTheme);
				}
			})();
		</script>
	</head>

	<body class={bodyClass}>
		<div class="docs-header">
			<a class="logo" href="https://rome.tools/">
				<InlineSVG src="rome-logo" />

				<span class="logo-text sr-only">Rome</span>
			</a>

			<ul class="desktop-navigation">
				<li><a href="/" class={Astro.url.pathname.startsWith("/playground") ? "" : "active"}>Docs</a></li>
				<li class="blog"><a href="https://rome.tools/blog/">Blog</a></li>
				<li><ActiveLink href="/playground">Playground</ActiveLink></li>
			</ul>

			<div id="docsearch-target"></div>

			<ExternalLinks />

			<ColorSchemeSwitcher />

			<a href="#" class="mobile-handle">
				<InlineSVG src="mobile-nav-handle" />
				<InlineSVG src="close-icon" />
			</a>
		</div>

		<slot />

		{import.meta.env.PROD && <script src="https://browser.sentry-cdn.com/5.29.0/bundle.tracing.min.js" crossorigin="anonymous"></script>}
		{import.meta.env.PROD && <script is:inline>
			if (typeof Sentry !== "undefined") {
				Sentry.init({
					dsn: "https://d2e6dd662d05460db434756b97bf054e@o487646.ingest.sentry.io/5546624",
					tracesSampleRate: 1.0,
				});
			}
		</script>}

		<script>
			import "@src/frontend-scripts/index.js";
		</script>
		<script>
			import "@src/frontend-scripts/docsearch.js";
		</script>
	</body>
</html>
